<template>
	<view class="container">
		<view class="print">
			<template v-if="State==''">
				<view class="printname" >{{BluetoothName}}</view>
			</template>
			<template v-if="State=='已连接'">
				<view class="printname">{{BluetoothName}}<text class="green">（{{State}}）</text></view>
				<view class="printbtn blue" @click="CancelConn()">断开连接</view>
			</template>
			<template v-if="State=='未连接'">
				<view class="printname red" v-if="State=='未连接'">{{BluetoothName}}</view>
				<view class="printbtn blue" @click="ReConn()">重新连接</view>
			</template>
		</view>
		<view class="square">
			<view class="title">{{ComName}}</view>
			<view class="subtitle">违法停车告知单</view>
			<view class="line">告知单编号 : {{Info.Num}}</view>
			<view class="line">车牌号 : {{Info.CarNum}}</view>
			<view class="line">违停时间 : {{Info.CreateDate.ToMinute()}}</view>
			<view class="line">违停地点 : {{Info.Address}}</view>
			<view class="line">{{ParkGaoZhi}}</view>
			<view class="line" style="margin-top:50rpx;">地址 : {{Address}}</view>
			<view class="line">联系电话 : {{Phone}}</view>
			<!-- <view class="line">执法人员 : {{Info.ZBRRealName}}</view> -->
			<view class="imgview">
				<view class="img1"><image :src="Ewm"/></view>
				<view class="img2"><image :src="Chapter"/></view>
			</view>
			<view class="scan"><view class="txt1">扫一扫 ，查违章</view><view class="txt2">{{Info.CreateDate.ToDateTwo()}}</view></view>
		</view>
		<yz-qr :qrPath.sync="Ewm" :text="Path" quality="L" colorDark="#000000" colorLight="transparent" style="position: absolute; left:-1000px;"></yz-qr>
		<canvas :style="'width: 560px; height: 240px; position: absolute; left:-1000px; bottom:-1000px;'" canvas-id="chapter"></canvas>
		<view class="btn">
			<button class="publishs" @click="Print" v-if="IsReady && State=='已连接'">打印</button>
			<button class="publishs graybg" v-else>请稍候...</button>
		</view>

	</view>
</template>

<script>
	import Bluetooth from '@/utils/bluetooth.js'
	var esc = require("@/utils/esc.js");
	export default {
		data() {
			return {
				ID: 0,
				Info: {ID: 0,SignName: ''},
				EasyCauseAction: {ID: 0},
				State:'',
				IsReady:false,
				BluetoothName:'正在搜索蓝牙打印机...',
				ChapterData:'',
				Chapter:'',
				Ewm: '',
				Path: '',
				Address:'',
				Phone:'',
				Base64: '',
				ComName:'',
				ParkGaoZhi:''
			};
		},
		onLoad(options) {
			this.ID = options.ID;
			uni.getBluetoothAdapterState({
			  success:(res)=> {
				  this.IsConn();
			  },fail:(res)=> {
			  	this.Init();
			  }
			});
			uni.onBLEConnectionStateChange(res=> {
			  if(!res.connected){
				  this.State="未连接";
				  this.BluetoothName="请打开手机蓝牙和蓝牙打印机";
			  }
			});
			this.Find_ParkInfo();
		},
		methods: {
			Init(){
				Bluetooth.InitBluetooth(list=>{
					console.log("链接的设备",list);
					if(list.length>0){
						this.State="已连接";
						this.BluetoothName="H96蓝牙打印机";
					}else{
						this.State="未连接";
						this.BluetoothName="请打开手机蓝牙和蓝牙打印机";
					}
				});
			},
			InitDrivers(){
				Bluetooth.GetDevices(list=>{
					if(list.length>0){
						this.State="已连接";
						this.BluetoothName="H96蓝牙打印机";
					}else{
						this.State="未连接";
						this.BluetoothName="请打开手机蓝牙和蓝牙打印机";
					}
				});
			},
			IsConn(){
				uni.getBLEDeviceRSSI({
				  deviceId:uni.getStorageSync("deviceId"),
				  success:json=> {
					this.State="已连接";
					this.BluetoothName="H96蓝牙打印机";
				  },
				  fail:res=>{
					  Bluetooth.Connect(item=>{
						if(item){
							this.State="已连接";
							this.BluetoothName="H96蓝牙打印机";
						}else{
							this.State="未连接";
							this.BluetoothName="请打开手机蓝牙和蓝牙打印机";
							this.InitDrivers();
						}
					  });
						
				  }
				});
			},
			ReConn(){
				this.State='';
				this.BluetoothName="正在搜索蓝牙打印机...";
				this.IsConn();
			},
			CancelConn(){
				this.Util.Confirm("您确定要断开连接吗？",item=>{
					Bluetooth.CloseBLEConnection(item=>{
						this.State="未连接";
					});
				});
			},
			Find_ParkInfo() {
				var data = {};
				data.ID = this.ID;
				data.Act = "Find_ParkInfo";
				data.Type = 1;
				this.Util.Loading("加载中...");
				this.Util.Post(data, json => {
					this.Util.HideLoading();
					uni.stopPullDownRefresh();
					uni.hideNavigationBarLoading();
					this.Info = json.Data.Info;
					this.Phone = json.Data.Phone;
					this.Address = json.Data.Address;
					this.Path = json.Data.Domain + "/?i=" + json.Data.Info.ID;
					this.ParkGaoZhi=json.Data.ParkGaoZhi;
					this.Chapter = json.Data.Chapter;
					this.ComName=json.Data.ComName;
					this.GetEwm(() => {
						this.Util.InitEwmChapter_Park_H96(this.Ewm,this.Chapter,()=>{
							setTimeout(()=>{
								this.GetChapterData();
							},1000);
						});
					});
				});
			},
			GetEwm(callback){
				var time = setInterval(()=>{
					if(this.Ewm!=""){
						clearInterval(time);
						if(callback){callback();}
					}
				},200);
			},
			GetChapterData(){
				uni.canvasGetImageData({
				  canvasId: 'chapter',
				  x: 0,
				  y: 0,
				  width: 560,
				  height: 240,
				  success : res => {
					  this.IsReady = true;
					  this.ChapterData = res;
				  }
				});
			},
			Print() {
				if(this.State!="已连接"){
					this.Util.Toast("请先连接打印机");
					return;
				}		
				this.Util.Loading("打印中...");
				var command = esc.jpPrinter.createNew();
				command.init();
				command.setPrintAndFeedRow(1);
				command.setSelectJustification(1); //居中显示
				command.setText(this.ComName);
				command.setText("违法停车告知单");
				command.setPrintAndFeedRow(1);
				command.setSelectJustification(0); //居左显示
				command.setText("告知单编号: " + this.Info.Num);
				command.setText("车牌号:" + this.Info.CarNum);
				command.setText("违停时间: " + this.Info.CreateDate.ToMinute());
				command.setText("违停地点: " + this.Info.Address);
				command.setPrintAndFeedRow(1);
				command.setText( this.ParkGaoZhi);
				command.setPrintAndFeedRow(1);
				command.setText("地址: "+ this.Address);
				command.setText("联系电话: "+ this.Phone);
				command.setPrintAndFeedRow(1);
				command.setSelectJustification(2); //居右显示
				command.setBitmap(this.ChapterData);
				command.init();
				command.setText("   扫一扫，查违章                 " + this.Info.CreateDate.ToDateTwo());
				command.setPrintAndFeedRow(5);
				command.SendBlData(command.getData());
				this.Util.HideLoading();
			}
		}
	}
</script>

<style lang="scss">
	.container{width:100%; padding-top:30rpx; padding-bottom:140rpx;
		.print{width:100%; height:90rpx; line-height: 80rpx; font-size:32rpx; padding-left:3%; display: flex; flex-direction: row;
			.printname{flex:1;}
			.printbtn{width:150rpx;}
		}
		.square{width:94%; margin-left:3%; height:auto; border-radius: 10rpx; background-color: #ffffff; padding:40rpx; display: flex; flex-direction: column;
			.title{width:100%; height:70rpx; line-height: 70rpx; font-size:40rpx; text-align: center;}
			.subtitle{width:100%; height:60rpx; line-height: 60rpx; font-size:30rpx; text-align: center;}
			.line{width:100%; height:auto; min-height: 50rpx; line-height:50rpx; margin-top:20rpx; font-size:32rpx; color:#696969;
				.signname{width:300rpx; height:150rpx;}
				
			}
			.imgview{display: flex; flex-direction: row; justify-content: space-between; margin-top:20rpx;
				.img1{width:240rpx; height:240rpx; margin-top:10rpx; float:left; image{width:100%; height:100%;}}
				.img2{width:240rpx; height:240rpx; float:left; image{width:100%; height:100%;}}
			}
			.scan{width:100%; height:32rpx; font-size:32rpx; display: flex; flex-direction: row; justify-content: space-between; 
				.txt1{width:240rpx; text-align: center;}
				.txt2{width:240rpx; text-align: center;}
			}
		}
	}
</style>